<template>
  <div id="panel">
    <!-- 查询表单区域 -->
    <el-card class="queryForm">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        :label-position="'right'"
      >
        <el-form-item label="预案名称：" prop="planName">
          <el-input
            v-model="queryParams.planName"
            placeholder="请输入预案名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业名称：" prop="enterpriseName">
          <el-input
            v-model="queryParams.enterpriseName"
            placeholder="请输入企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="行政区域：" prop="region">
          <el-select v-model="queryParams.region" placeholder="请选择行政区域">
            <el-option label="请选择行政区域" value=""></el-option>
            <el-option label="区域1" value="region1"></el-option>
            <el-option label="区域2" value="region2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="pageContent">
      <el-table
        :data="tableData"
        stripe
        border
        :height="tableHeight"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="planName" label="预案名称" />
        <el-table-column prop="enterpriseName" label="企业名称" />
        <el-table-column prop="recordTime" label="备案时间" />
        <el-table-column prop="recordNo" label="备案编号" />
        <el-table-column prop="riskLevel" label="风险级别">
          <template slot-scope="scope">
            <el-tag :type="getRiskTagType(scope.row.riskLevel)">{{
              scope.row.riskLevel
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="signTime" label="法人签署时间" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        class="pagination-self"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :pager-count="5"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableList.total"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: "EmergencyPlanList",
  data() {
    return {
      tableHeight: window.innerHeight - 600,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        planName: "",
        enterpriseName: "",
        region: "",
      },
      tableList: {
        total: 3,
        rows: [],
      },
      tableData: [
        {
          planName: "某污水处理厂应急预案",
          enterpriseName: "某县污水处理厂",
          recordTime: "2023-01-15",
          recordNo: "一般-大气（GCM-1）",
          riskLevel: "一般大气",
          signTime: "2023-01-20",
        },
        {
          planName: "某污水处理厂应急预案",
          enterpriseName: "某县污水处理厂",
          recordTime: "2023-02-10",
          recordNo: "一般-水（GCM-1）",
          riskLevel: "一般水",
          signTime: "2023-02-15",
        },
        {
          planName: "某污水处理厂应急预案",
          enterpriseName: "某市污水处理厂",
          recordTime: "2023-03-05",
          recordNo: "较大-水（GCM-1）",
          riskLevel: "较大水",
          signTime: "2023-03-10",
        },
      ],
    };
  },
  mounted() {
    this.tableList.rows = this.tableData;
  },
  methods: {
    // 风险级别标签类型判断
    getRiskTagType(level) {
      if (level.includes("一般")) return "info";
      if (level.includes("较大")) return "warning";
      return "info";
    },
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log("查询参数：", this.queryParams);
      // 实际项目中可在此调用接口获取数据
    },
    // 重置
    resetQuery() {
      this.queryParams.planName = "";
      this.queryParams.enterpriseName = "";
      this.queryParams.region = "";
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.handleQuery();
    },
    // 分页页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.handleQuery();
    },
    // 详情操作
    handleDetail(row) {
      console.log("查看详情：", row);
      // 实际项目中可在此打开详情弹窗或页面
    },
  },
};
</script>

<style lang="scss" scoped>
#panel {
  padding: 10px;

  .el-card {
    margin-bottom: 10px;
  }

  .queryForm .el-form {
    display: flex;
    align-items: center;
  }

  .queryForm .el-form-item {
    margin-right: 15px;
  }

  .pageContent .el-table {
    margin-top: 10px;
  }

  .pagination-self {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
